/*
 * @Author: your name
 * @Date: 2021-11-02 14:52:04
 * @LastEditTime: 2021-11-04 17:19:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-source-code-snanndom\src\index.js
 */
import h from './mySnabbdom/h'
import patch from './mySnabbdom/patch'
const container = document.getElementById('container');
// const myVnode = h('h1', {}, '你好')
const myVnode = h('h1', {}, [
    h('h4', {}, '你好1'),
    h('h5', {}, '你好2'),
    h('h6', {}, '你好3')
])

const myVnode2 = h('h2', {}, [
    h('h4', {}, '更换1'),
    h('h5', {}, '更换2'),
    h('h6', {}, '更换3')
])

const myVnode3 = h('h1', {}, '你好2')

const myVnode4 = h('ul', {}, [
    h('li', {key:'A'}, 'A'),
    h('li', {key:'B'}, 'B'),
    h('li', {key:'C'}, 'C'),
    h('li', {key:'D'}, 'D'),
    // h('li', {key:'D'}, 'D'),
    h('li', {key:'E'}, 'E'),
    // h('li', {key:'F'}, 'F'),
    // h('li', {key:'X'}, 'X'),
])

const myVnode5 = h('ul', {}, [
    h('li', {key:'Q'}, [
        h('h6', {key:'d'}, 'd'),
    ]),
    h('li', {key:'B'}, 'B'),
    h('li', {key:'C'}, 'C'),
    h('li', {key:'A'}, 'A'),
    h('li', {key:'E'}, 'E'),
    h('li', {key:'I'}, 'I'),
    h('li', {key:'J'}, 'J'),
    h('li', {key:'K'}, 'K'),
    h('li', {key:'G'}, 'G'),
    h('li', {key:'D'}, 'D'),
])

// const myVnode6 = h('ul', {}, [
//     h('li', {key:'C'}, 'C'),
//     h('li', {key:'B'}, 'B'),
//     h('li', {key:'A'}, 'A'),
// ])
// const myVnode6 = h('ul', {}, [
//     h('li', {key:'A'}, 'AAAAAAA'),
//     h('li', {key:'D'}, 'DDDDD'),
//     // h('li', {key:'E'}, 'EEEEE'),
//     h('li', {key:'B'}, 'BBBBB'),
//     h('li', {key:'C'}, 'CCCCC'),
// ])

patch(container, myVnode4)

setTimeout(() => {
    patch(myVnode4, myVnode5)
    console.log('3秒后测试页面是否更新，patch函数dom变换是否生效');
}, 2000)